let button = document.querySelector("#search-btn");
button.onclick = function () {
    let input = document.querySelector(".header input");
    let query = input.value;
    console.log(query);
    $.ajax({
        type: "GET",
        url: "../searcher?query=" + query,
        success: function (data, status) {
            // success这个函数会在请求成功后调用
            // data表示拿到的结果数据
            // status表示Http状态码
            //根据搜到的数据结果，构造出页面内容
            console.log(data);
            buildResult(data);
        }
    })

    function buildResult(data) {
        let result = document.querySelector(".result");
        //清空上次结果
        result.innerHTML = '';

        let countDiv = document.createElement('div');
        countDiv.innerHTML = '当前找到 ' + data.length + ' 个结果！';
        countDiv.className = 'count';
        result.appendChild(countDiv);

        for (let item of data) {
            let itemDiv = document.createElement('div');
            itemDiv.className = 'item';

            let title = document.createElement('a');
            title.href = item.url;
            title.innerHTML = item.title;
            title.target = '_blank';
            itemDiv.appendChild(title);

            let desc = document.createElement('div');
            desc.className = 'desc';
            desc.innerHTML = item.desc;
            itemDiv.appendChild(desc);

            let url = document.createElement('div');
            url.className = 'url';
            url.innerHTML = item.url;
            itemDiv.appendChild(url);

            result.appendChild(itemDiv);
        }
    }
}